<template>
  <div class="user-info">
    <el-form>
      <el-form-item class="avator-item">
        <div class="avator" :style="{backgroundImage: 'url(' + infoForm.avatar_path + ')'}">
          <div class="layer">
            <span class="text">编辑</span>
          </div>
          <input type="file" @change="onFileChange" class="upload">
        </div>
        <span class="tip">只能上传jpg/png文件，且不超过1mb </span>
       
      </el-form-item>
      <el-button type="primary" @click.prevent="saveUser">确认</el-button>
    </el-form>

  </div>
</template>

<script>
import Utils from '../../utils';
import sdApi from '../../api/sd';

export default {
  data() {
    return {
      formData: new FormData(),
    };
  },
  props: [
    'infoForm'
  ],
  methods: {
    async onFileChange(e) {
      let self = this;
      let files = e.target.files || e.dataTransfer.files;
      if (!files.length) {
        return;
      }
      let file = files[0];
      const res = Utils.checkFile(file, /(.*)+\.(jpg|png)$/i, 1024 * 1024);
      if (!res) {
        return;
      }
      let base64 = await Utils.createImage(file);
      // console.log(base64);
      self.infoForm.avatar_path = base64;
      self.formData.append('avatar', file);
      // self.formData.avatar = file;
      
    },
    //更新用户信息
    saveUser() {
      let self = this;
      // self.formData.email =  self.infoForm.email;
      // self.formData.gender =  self.infoForm.gender;
      // self.formData.name =  self.infoForm.name;
      // self.formData.qq =  self.infoForm.qq;
      self.formData.append('qq', self.infoForm.qq);
      // self.formData.append('birthday', Utils.dateFormat(self.infoForm.birthday));
      // console.log(this.formData);
      sdApi.saveUser(this.formData).then(()=> {
        this.$emit('update');  
      });
    }
  },
};
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .user-info
    .avator-item
      text-align center
      .avator
        display block
        margin-left auto
        margin-right auto
        text-align center
        width 100px
        height 100px
        border-radius: 50%
        background-position center
        background-size cover
        background-repeat no-repeat
        border 1px solid #EFF2F7

    



</style>
